<template>
  <div class="dialog-content">
    <p class="login-warning" v-show="errors.any() || isNouser">
      <span class="el-icon-warning" v-show="isNouser" @click="$emit('im-registe'), clearUser()">&nbsp;&nbsp;该用户尚未注册，请<a href="#">注册</a></span>
      <!-- <span class="el-icon-warning" v-show="!isNouser">&nbsp;&nbsp;用户名密码不正确</span> -->
      <span class="el-icon-warning" v-if="errors.items.length > 0 && !isNouser">&nbsp;&nbsp;{{raplaceNull(errors.items[0].msg)}}</span>
    </p>
    <div class="dialog-input" :style="{marginTop: ((errors.any() || isNouser) ? 0 : 50) + 'px'}">
      <el-input placeholder="请输入用户名" v-validate.disable="'required'" name="用户名"  v-model.trim="user.userName" @blur="valiUser()"></el-input>
    </div>
    <div class="dialog-input">
      <el-input placeholder="请输入密码" type="password" v-model.trim="user.password" v-validate.disable="'required|min:6|max:16'"
      autoComplete="off"  @keyup.enter.native="handlogin()" data-vv-name="密码"> </el-input>
    </div>

    <el-button type="success width-full diaglo-btn" round @click="handlogin" :loading="isLoad" :disabled="isNouser">{{isLoad ? '登录中，请稍等' : '登录'}}</el-button>
    <div class="login-func">
      <el-checkbox v-model="checked" class="fl">自动登录</el-checkbox>
      <div class="fr">
        <el-button type="text" @click="$emit('forgetps'), clearUser()">忘记密码</el-button>?
        <el-button type="text" @click="$emit('im-registe'), clearUser()">立即注册</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Cookies from 'js-cookie'

  export default {
    title: '短信登录',
    name: 'ps-login',
    props: {
      loginVisible: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        user: {
          userName: '',
          password: ''
        },
        checked: Cookies.get('checked') === '1' ? true : false,
        isNouser: false,
        isLoad: false
      }
    },
    methods: {
      handleClick () {},
      handlogin () {
        this.$validator.validate().then(result => {
          // 所有验证成功
        if (result) {
            this.isLoad = true
            axios.post('/mscs/user/login', this.$paramsConvert(this.user)).then((res) => {
              this.isLoad = false
              if (res.data.code !== 1) {
                this.$codeError(res)
              } else {
                if (this.$route.name === 'ForgetPassword') {
                  this.$router.replace({name: 'Home'})
                }
                this.$store.commit('setUser', res.data.data)
                this.$emit('login-success', res.data)
                if (this.checked) {
                  localStorage.username = this.user.userName
                  localStorage.password = this.user.password
                  Cookies.set('checked', '1')

                } else {
                  localStorage.removeItem('username')
                  localStorage.removeItem('password')
                  Cookies.remove('checked')
                  this.user.password = ''
                }
              }
            }).catch((error) => {
              console.log('111', error);
              this.isLoad = false
              this.$alert(`登陆失败，原因:${error.response.statusText}`)
            })
            // this.user.userName = ''
            // this.user.password = ''
          }
        })
      },

      valiUser () {
        if (this.user.userName.length === 0) {
          return
        }
        // this.$validator.validate().then(result => {
        //   if (!this.$validator.errors.has('username')) {
            axios.get(`/mscs/user/findUserByUsername?userName=${this.user.userName}`).then((res) => {
              if (res.data.code === 1) {
                this.isNouser = false
              } else {
                this.isNouser = true
              }
            })
        //   }
        // })
      },
      clearUser () {
        this.user.userName = ''
        this.user.password = ''
        this.isNouser = false
      },
      raplaceNull (str) {
        return str.replace(/null/g, '密码')
        // if (str.substring(0, 4) === 'null') {
        //
        // }
      }
    },
   mounted () {
     if (Cookies.get('checked') === '1') {
       this.user.userName = localStorage.username
       this.user.password = localStorage.password
     }
   },
    watch: {
      'loginVisible' (val) {
        if (val && !(Cookies.get('checked') === '1')) {
          this.user.password = ''
        } else if (val && Cookies.get('checked') === '1') {
          this.user.userName = localStorage.username
          this.user.password = localStorage.password
        }
      }
    },
    // computed: {
    //   psIs () {
    //     return this.user.password && this.user.password.length >= 6 && this.user.password.length <= 16
    //   }
    // }
  }
</script>
<style>
  .login .el-tabs__nav{
    width: 100%;
  }
  .login .el-tabs__active-bar {
    height: 0;
  }
  .login-warning {
    background: #F6EBEA;
    color: #C05A5A;
    text-align: left;
    margin: 0;
    padding: 9px 50px;
    margin: 0 -50px;
    margin-bottom: 8px;
  }
  .login-warning a {
    color: #C05A5A;
  }
  .login .el-tabs__header {
    position: static;
    text-align: center;
    font-size: 18px;
    margin-top: 20px;
  }
  .login .el-tabs__item{
    font-size: 18px;
  }

  .login .el-tabs__nav-wrap::after {
    height: 0;
  }
  .login .el-tabs__nav-wrap {
    position: static;
  }
  .login .el-tabs__item:hover {
    color: #94C05A;
  }
  .login .el-tabs__item.is-active {
    color: #94C05A;
  }
  /* 密码登陆底部功能 */
  .login-func, .login-func .el-button{
    color: #497D03;
  }
  .login-func button {
    padding: 0;
  }
</style>
